<template>
  <view>
    <view
      class="bg-input pa-2 bdrs-8"
      hover-class="btn-1"
      @click="showPop = true"
    >
      <span>{{ time }}</span>
    </view>
    <u-datetime-picker
      :show="showPop"
      v-model="time"
      mode="time"
      closeOnClickOverlay
      @close="onClose"
      @cancel="onClose"
      @confirm="onClose"
    />
  </view>
</template>

<script>
export default {
  props: {
    value: String,
  },
  data() {
    return {
      time: this.value,
      showPop: false,
    };
  },
  watch: {
    value(val) {
      this.time = val;
    },
    time(val) {
      this.$emit("input", val);
    },
  },
  methods: {
    onClose() {
      this.showPop = false;
    },
  },
};
</script>
